<!Doctype html>
<html>
<head>
<meta charset="utf-8"  />
<embed src="xqlzhk.mp3" hidden="true" autostart="true" loop="true">
<title>tree to WSS</title>
<style>
body
{
	background-color:#BBBB00;
}
h1
{
	color:pink;
	text-align:right;<!--left	把文本排列到左边。默认值：由浏览器决定。
right	把文本排列到右边。
center	把文本排列到中间。
justify	实现两端对齐文本效果。
inherit	规定应该从父元素继承 text-align 属性的值。-->
	top: 100px;
	left: 100px;
}
p
{
	font-family:"SimHei";
	<!--字体网上找-->
	font-size:40px;
	width:100px;
	height:20px;
	width:960px; 
	height:300px;
	
}
#img {
position:fixed;
  top: 0;
  left: 0;
  width:100%;
  height:100%;
  z-index:-10;
  zoom: 1;
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-position: center 0;
}
#wss4{font-size:30px;
color:red;}
#zch {color:red;}
.wss {color:green;}

@keyframes  ani{
    0%{  opacity:0; }
    100%{ opacity:1; }
	 position: fixed;
	 left: 100px;
	 top: 200px;
}
.box p:nth-child(1){
   animation: ani 2s both;
   font-size:50px;
   color:#DEB887;
	word-wrap: break-word;
	word-break: break-all;
   display: inline;
   position: fixed;
	 left: 100px;
	 top: 300px;
}

.box p:nth-child(3){
   animation: ani 1s 2s both;
   font-size:50px;
   color:#F0FFFF;
   word-wrap: break-word;
	word-break: break-all;
	 display: inline;
	 position: fixed;
	 left: 100px;
	 top: 350px;
}

.box p:nth-child(5){
   animation: ani 1s 3s both;
    font-size:50px;
   color:#FFF8DC;
   word-wrap: break-word;
	word-break: break-all;
	 display: inline;
	 position: fixed;
	 left: 100px;
	 top: 400px;
}

.box p:nth-child(7){
	animation: ani 1s 4s both;
	 font-size:50px;
   color:#A9A9A9;
   word-wrap: break-word;
	word-break: break-all;
	 display: inline;
	 position: fixed;
	 left: 100px;
	 top: 450px;
}

.box p:nth-child(9){
   animation: ani 1s 5s both;
   font-size:50px;
   color:pink;
   word-wrap: break-word;
	word-break: break-all;
	 display: inline;
	 position: fixed;
	 left: 100px;
	 top: 500px;
}

.box p:nth-child(11){
   animation: ani 1s 6s both;
   font-size:50px;
   color:#FFFAF0;
   word-wrap: break-word;
	word-break: break-all;
	 display: inline;
	 position: fixed;
	 left: 100px;
	 top: 550px;
}

.box p:nth-child(13){
   animation: ani 1s 7s both;
   font-size:50px;
   color:#F0FFF0;
   word-wrap: break-word;
	word-break: break-all;
	 display: inline;
	 position: fixed;
	 left: 100px;
	 top: 600px;
}

.box p:nth-child(15){
   animation: ani 1s 8s both;
   font-size:80px;
   color:#FF0000;
   word-wrap: break-word;
	word-break: break-all;
	 display: inline;
	 position: fixed;
	 left: 100px;
	 top: 650px;
}
.box p:nth-child(17){
   animation: ani 1s 8s both;
   font-size:80px;
   color:pink;
   word-wrap: break-word;
	word-break: break-all;
	 display: inline;
	 position: fixed;
	 left: 100px;
	 top: 710px;
}
  *{margin: 0;padding: 0;}
    html{
        height:100%;
    }
    body{
        height:100%;
        /*background-color: rgba(0, 0, 0,1);body比较特殊*/
        background-color: black;
        overflow: hidden;          
    }
    /*.one{
   

    }*/
	
	
.beijing{
	hight:100px;
	width:100px;
	background-image: url(beijing3.png);
	background-repeat: repeat-y;
}
   
   audio{
             display: none;
         }
</style>
<link rel="stylesheet" type="text/css"  />
</head>

<body>
<div id="beijing">
<script>
        // var h=document.body.offsetHeight;/*body的可视高度*/
        // alert(h);
        function Flake(){
                 //创建一张图片
               var f=document.createElement('img');
                 //获得文档宽
                var w=document.documentElement.clientWidth -70;
                 //获得文档高
                 //实际上，上面html的高和宽都是继承document的  
                var h=document.documentElement.clientHeight ;
                //定义随机出现的图片
                var left=Math.random()*w;
                var top=Math.random()*h;
              //给图片添加路径在执行函数flake时让他显示出来,    Math.ceil(Math.random()*4是指有四个随机图片。
            f.src='xuehua'+ Math.ceil(Math.random()*1)+'.jpeg';
            f.style.position='absolute';
            //  f.style.z-index='1';
            f.style.left=left+'px'  -100;/*字符串拼接*/
            f.style.top=top+'px' -100;
            f.style.transform='scale('+Math.random()+')';
             //必须把创建出来的img添加到body里才能显示
            document.body.appendChild(f);
            function down(){
               left+=Math.random()*5;
               top+=Math.random()*3;
                if(left>w)   left=-10;
                if(top>h)   top=-10;
               
                 f.style.left=left+'px';
                 f.style.top=top+'px';
            }
            setInterval(down,20);
        }
     for(var i=0;i<20;i++){
        new Flake();
     }
    </script>

<div class="box"  id="beijing">
    <p>我希望有个如你一般的人</p></br>
    <p>如山间清爽的风</p></br>
    <p>如古城温暖的光</p></br>
	<p>从清晨到夜晚</p></br>
	<p>由山野到书房</p></br>
	<p>等待不怕岁月蹉跎</p></br>
	<p>不怕路途遥远</p></br>
	<p>只要最后是你就好</p></br>
	<p>-zch</p>
</div>

<audio controls="controls" autoplay="autoplay" loop=-1>
 	<source src="xqlzhk.mp3" type="audio/mpeg" />
	</audio>





<img src="beijing3.png" id="img" border="0" alt="flower"/>

</div>

</body>
</html>